<template>
  <div>
    <el-page-header @back="cancel"></el-page-header>
    <div class="header-tip">
      <div class="l">
        <div class="title">创建分润规则</div>
        <!-- <div class="alert">
          <i class="el-icon-warning"></i>
          <span
            >创建规则前请先确定本条规则适用的收款渠道以及各渠道可分润最高金额，防止超过最高分润金额引起分润失败</span
          >
        </div> -->
      </div>
      <div class="r">
        <el-button class="width120" @click="cancel()">取消</el-button>
        <el-button
          class="width120"
          @click="submit('createRulesForm')"
          type="primary"
          >保存</el-button
        >
      </div>
    </div>

    <el-form
      class="rule-form"
      label-width="120px"
      :model="form"
      :rules="formRules"
      ref="createRulesForm"
    >
      <el-card body-style="margin-bottom:10px">
        <div class="title">基本信息</div>
        <el-form-item label="模板名称" prop="ruleName">
          <el-input
            v-model="form.ruleName"
            style="width: 604px"
            placeholder="请输入模板名称"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="模板说明" prop="ruleDesc">
          <el-input
            type="textarea"
            v-model="form.ruleDesc"
            placeholder="请输入模板说明"
            style="width: 604px"
          ></el-input>
        </el-form-item>
        <el-row>
          <!-- <el-col :span="7">
            <el-form-item label="分润时效" prop="payMode">
              <el-radio-group v-model="form.payMode">
                <el-radio label="real">实时分润</el-radio>
                <el-radio label="delay">延时分润</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="7">
            <el-form-item label="分润模式" prop="separateType">
              <el-radio-group
                v-model="form.separateType"
                @change="separateTypeFn"
              >
                <el-radio :label="1">百分比</el-radio>
                <el-radio :label="2">固定金额</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="状态" prop="ruleStatus">
        <el-radio-group v-model="form.ruleStatus">
          <el-radio label="Y">有效</el-radio>
          <el-radio label="N">无效</el-radio>
        </el-radio-group>
      </el-form-item> -->
      </el-card>
      <el-card body-style="margin-bottom:10px">
        <div class="title">分润信息</div>
        <el-row>
          <el-col :span="7">
            <el-form-item label="模板层级" prop="levelSum">
              <el-select
                style="width: 377px"
                v-model="form.levelSum"
                placeholder="请选择"
                @change="(val) => checkChange(val)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          :gutter="10"
          v-for="(item, i) of form.accountRulesInfoList"
          :key="i"
        >
          <el-col :span="4">
            <el-form-item :label="i == 0 ? '分润规则' : ''">
              <div class="modellabel">
                {{ i == 0 ? "平台分润" : `${i}级商户` }}
              </div>
              <!-- <el-merchant-vue
                v-model="item.memberId"
                :disabled="i === 0"
                :request-data="false"
                :placeholder="'请选择'"
                v-if="i === 0"
              ></el-merchant-vue> -->

              <!-- <el-select
                v-else
                style="width: 100%"
                v-model="item.memberName"
                value-key="memberName"
                class="input_"
                filterable
                remote
                clearable
                placeholder="请输入商户名称或商户ID"
                :remote-method="remoteMethod"
                @change="setId(item, i)"
              >
                <el-option
                  v-for="item of restaurants"
                  :key="item.id"
                  :label="item.memberName"
                  :value="item"
                  class="height70"
                >
                  <div style="color: #999999">
                    {{ item.memberName }} 商户ID :{{ item.memberNo }}
                  </div>
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="4" class="modelInput">
            <el-form-item
              :prop="`accountRulesInfoList.${i}.fmtAmount`"
              :rules="formRules.fmtAmount"
            >
              <el-input
                v-if="form.separateType === 1"
                type="number"
                v-model="item.fmtAmount"
                placeholder="百分比"
                :disabled="item.remainAmountBelong === 'Y'"
              >
                <template slot="append">%</template>
              </el-input>
              <el-input
                v-else
                type="number"
                v-model="item.fmtAmount"
                :placeholder="
                  item.remainAmountBelong === 'Y' ? '剩余金额' : '固定金额'
                "
                :disabled="item.remainAmountBelong === 'Y'"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="7" :offset="1" v-if="form.separateType != 1">
            <el-form-item
              label="剩余资金归属"
              :prop="`accountRulesInfoList.${i}.remainAmountBelong`"
              :rules="formRules.remainAmountBelong"
            >
              <el-select
                v-model="item.remainAmountBelong"
                style="width: 100%"
                placeholder="请选择"
                @change="(val) => changeFlag(val, i, 'remainAmountBelong')"
              >
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="1" v-if="i > 1">
            <el-form-item label-width="0" style="padding-top: 4px">
              <i class="el-icon-remove-outline" @click="deleteChild(i)"></i>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="未分润资金归属" prop="fundBelong">
              <el-radio-group v-model="form.fundBelong">
                <el-radio :label="1">收款方</el-radio>
                <el-radio :label="2">服务方</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row
          :gutter="20"
          v-for="(item, i) of form.accountRulesInfoList"
          :key="i"
        >
          <el-col :span="7">
            <el-form-item
              :label="i === 0 ? '分润发起方' : '分润接收方'"
              :prop="
                i === 0
                  ? `accountRulesInfoList.${i}.memberId`
                  : `accountRulesInfoList.${i}.memberName`
              "
              :rules="formRules.memberName"
            >
              <el-merchant-vue
                v-model="item.memberId"
                :disabled="i === 0"
                :request-data="false"
                :placeholder="'请选择'"
                v-if="i === 0"
              ></el-merchant-vue>

              <el-select
                v-else
                style="width: 100%"
                v-model="item.memberName"
                value-key="memberName"
                class="input_"
                filterable
                remote
                clearable
                placeholder="请输入商户名称或商户ID"
                :remote-method="remoteMethod"
                @change="setId(item, i)"
              >
                <el-option
                  v-for="item of restaurants"
                  :key="item.id"
                  :label="item.memberName"
                  :value="item"
                  class="height70"
                >
                  <div style="color: #999999">
                    {{ item.memberName }} 商户ID :{{ item.memberNo }}
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item
              :label="form.separateType === 1 ? '分润比例' : '分润金额'"
              :prop="`accountRulesInfoList.${i}.fmtAmount`"
              :rules="formRules.fmtAmount"
            >
              <el-input
                v-if="form.separateType === 1"
                type="number"
                v-model="item.fmtAmount"
                placeholder="百分比"
                :disabled="item.remainAmountBelong === 'Y'"
              >
                <template slot="append">%</template>
              </el-input>
              <el-input
                v-else
                type="number"
                v-model="item.fmtAmount"
                :placeholder="
                  item.remainAmountBelong === 'Y' ? '剩余金额' : '固定金额'
                "
                :disabled="item.remainAmountBelong === 'Y'"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1" v-if="form.separateType != 1">
            <el-form-item
              label="剩余资金归属"
              :prop="`accountRulesInfoList.${i}.remainAmountBelong`"
              :rules="formRules.remainAmountBelong"
            >
              <el-select
                v-model="item.remainAmountBelong"
                style="width: 100%"
                placeholder="请选择"
                @change="(val) => changeFlag(val, i, 'remainAmountBelong')"
              >
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="i > 1">
            <el-form-item label-width="0" style="padding-top: 4px">
              <i class="el-icon-remove-outline" @click="deleteChild(i)"></i>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="">
              <el-button
                style="width: 100%; border-color: #03bfc6; color: #03bfc6"
                @click="addChild"
                >新增</el-button
              >
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-card>
      <el-card>
        <div class="title">分润回退设置</div>
        <el-form-item>
          <el-radio-group
            v-model="form.refundSet"
            @change="separateTypeFn"
            class="modelBack"
          >
            <el-radio :label="1" style="width: 100%"
              >不退分润。订单发生退款时，不返还分润给收款方</el-radio
            >
            <el-radio :label="2" style="width: 100%"
              >全额退还分润。订单发生退款时，返还全部分润给收款方</el-radio
            >
            <el-radio :label="3" style="width: 100%"
              >按比例退分润。订单发生退款时，接分润比例退还相应分润给收款方</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-card>

      <!-- <div class="title" style="margin-top: 48px; margin-bottom: 34px">
        其他设置
      </div>
      <div class="text"><span style="color: #F56C6C; margin-right: 4px">*</span>订单退款时的分润返还设置</div>
      <el-form-item prop="resource">
        <el-radio-group v-model="form.resource" class="group">
          <el-radio
            label="不退分润（对订单有任何退款操作，均不返还分润给收款方）"
          ></el-radio>
          <el-radio
            label="全额退还分润（对订单进行任何退款操作，返还全部分润给收款方）"
          ></el-radio>
          <el-radio
            label="按比例退分润（按退款金额占订单总金额的比例，退还相应比例的分润给收款方）"
          ></el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item label="" v-if="!this.$route.query.id">
        <div class="submit" @click="submit('createRulesForm')">提交</div>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { isCnEnNum } from "@/utils/validate";
// import elMerchantVue from "@/components/el-merchant.vue";
import { getUserInfo } from "@/utils/public";
import { mapMutations } from "vuex";

export default {
  name: "caseAccountCreateRules",
  components: {
    // elMerchantVue,
  },
  data() {
    const testAccName = (rule, value, callback) => {
      if (isCnEnNum(value)) {
        callback();
      } else {
        callback(new Error("请输入中/英文数字，不支持特殊字符"));
      }
    };
    return {
      options: [
        {
          value: 2,
          label: "2级",
        },
        {
          value: 3,
          label: "3级",
        },
        {
          value: 4,
          label: "4级",
        },
        {
          value: 5,
          label: "5级",
        },
        {
          value: 6,
          label: "6级",
        },
        {
          value: 7,
          label: "7级",
        },
      ],
      restaurants: [],
      state: "",
      timeout: null,
      arr2: [],
      form: {
        payMode: "real",
        ruleStatus: "",
        levelSum: 2, //模版层级
        separateType: 1,
        fundBelong: 1, //未分润资金归属
        refundSet: 1,  //分润回退设置
        ruleName: "",
        ruleDesc: "",
        accountRulesInfoList: [
          {
            levels: 0,
            memberName: "",
            // memberId: [],
            // feeFlag: "",
            fmtAmount: "",
            address: "",
          },
          {
            levels: 1,
            memberName: "",
            // memberId: "",
            // feeFlag: "",
            fmtAmount: "",
            address: "",
          },
        ],
      },
      formRules: {
        ruleName: [
          { required: true, message: "请输入分润模板名称", trigger: "change" },
          {
            validator: testAccName,
            trigger: "change",
          },
          { max: 30, message: "最大长度30字符", trigger: "change" },
          { min: 5, message: "最小长度5字符", trigger: "change" },
        ],
        // payMode: [
        //   { required: true, message: "请选择分润时效", trigger: "change" },
        // ],
        // separateType: [
        //   { required: true, message: "请选择分润模式", trigger: "change" },
        // ],
        ruleStatus: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择返还设置", trigger: "change" },
        ],
        // memberId: [
        //   { required: true, message: "请输入商户名称或商户id", trigger: "change" },
        // ],
        memberName: [
          {
            required: true,
            message: "请输入商户名称或商户id",
            trigger: "change",
          },
        ],
        fmtAmount: [
          // { required: true, message: "请输入分润数值", trigger: "change" },
          { validator: this.checkAmount, trigger: "change" },
        ],
        // feeFlag: [
        //   {
        //     required: true,
        //     message: "请选择是否承担手续费",
        //     trigger: "change",
        //   },
        // ],
        remainAmountBelong: [
          { required: true, message: "请选择剩余资金归属", trigger: "change" },
        ],
      },
      // parentList: []
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    ...mapMutations(["changeLive"]),
    checkChange(val) {
      console.log(val);
      let arr = [];
      for (let i = 0; i < val; i++) {
        arr.push({
          levels: i,
          // memberId: "",
          // feeFlag: "",
          fmtAmount: "",
          // remainAmountBelong: "N",
        });
      }
      console.log(arr);
      this.form.accountRulesInfoList = arr;
      setTimeout(() => {
        this.$refs["createRulesForm"].clearValidate();
      }, 0);
    },
    separateTypeFn() {
      for (
        let index = 0;
        index < this.form.accountRulesInfoList.length;
        index++
      ) {
        if (this.form.accountRulesInfoList[index].fmtAmount) {
          this.$refs["createRulesForm"].validateField(
            "accountRulesInfoList." + index + ".fmtAmount"
          );
        } else {
          this.$refs["createRulesForm"].clearValidate(
            "accountRulesInfoList." + index + ".fmtAmount"
          );
        }
      }
    },
    setId(val, i) {
      //console.log(val);
      //console.log(i);
      let obj = this.restaurants.find(
        (item) => item.memberNo === val.memberName.memberNo
      );
      this.form.accountRulesInfoList[i].memberId = obj.id;
      this.form.accountRulesInfoList[i].memberName = obj.memberName;
      //console.log(this.form.accountRulesInfoList[i]);
    },
    remoteMethod(query) {
      if (query !== "") {
        //console.log(1);
        //console.log(query);
        this.getMerchantList(query);
      } else {
        //console.log(2);
        this.merchantList = [];
      }
    },
    getMerchantList(val) {
      //console.log(val);
      this.$http
        .get(
          "/api/merchant/memberbase/getMemberBaseByAppIdAndMerchantIdAndMemberName?memberName=" +
            val
        )
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.restaurants = res.data;
          }
        });
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    getList() {
      const id = this.$route.query.id;
      if (id) {
        this.$http
          .get(`/api/settle/rules/get`, {
            params: { id },
          })
          .then((res) => {
            if (res.code === "0000") {
              this.form = res.data;
              this.form.accountRulesInfoList =
                this.form.accountRulesInfoList.map((item, i) => ({
                  ...item,
                  remainAmountBelong: item.remainAmountBelong ? "Y" : "N",
                  memberId: i === 0 ? [item.memberId] : item.memberId,
                  // memberId:
                  //   i === 0 ? [item.memberId] : this.setMemberId(item.memberId),
                }));
              //console.log(this.form.accountRulesInfoList);
            }
          });
      } else {
        const info = getUserInfo();
        this.form.accountRulesInfoList[0].memberId = [
          ...this.setMemberId(info.memberId),
        ];
      }

      // this.$http.get("/api/merchant/memberbase/getTree").then((res) => {
      //     if (res.code === '0000') {
      //         this.parentList = this.deepArr(res.data);

      //     }
      // });
    },
    setMemberId(id) {
      this.arr2 = [];
      this.each(this.$store.state.treeList, id);
      var arr2 = [];
      arr2 = this.arr2;
      return arr2;
    },
    each(arr, id) {
      arr.forEach((item) => {
        if (item.value == id) {
          this.arr2.push(item.value);
        } else {
          if (item.children) {
            item.children.forEach((a) => {
              if (a.value == id) {
                this.arr2.push(item.value);
                this.arr2.push(a.value);
              } else {
                if (a.children) {
                  a.children.forEach((b) => {
                    if (b.value == id) {
                      this.arr2.push(item.value);
                      this.arr2.push(a.value);
                      this.arr2.push(b.value);
                    } else {
                      if (b.children) {
                        b.children.forEach((c) => {
                          if (c.value == id) {
                            this.arr2.push(item.value);
                            this.arr2.push(a.value);
                            this.arr2.push(b.value);
                            this.arr2.push(c.value);
                          } else {
                            if (c.children) {
                              c.children.forEach((d) => {
                                if (d.value == id) {
                                  this.arr2.push(item.value);
                                  this.arr2.push(a.value);
                                  this.arr2.push(b.value);
                                  this.arr2.push(c.value);
                                  this.arr2.push(d.value);
                                } else {
                                  if (d.children) {
                                    d.children.forEach((e) => {
                                      if (e.value == id) {
                                        this.arr2.push(item.value);
                                        this.arr2.push(a.value);
                                        this.arr2.push(b.value);
                                        this.arr2.push(c.value);
                                        this.arr2.push(d.value);
                                        this.arr2.push(e.value);
                                      } else {
                                        if (e.children) {
                                          e.children.forEach((f) => {
                                            if (f.value == id) {
                                              this.arr2.push(item.value);
                                              this.arr2.push(a.value);
                                              this.arr2.push(b.value);
                                              this.arr2.push(c.value);
                                              this.arr2.push(d.value);
                                              this.arr2.push(e.value);
                                              this.arr2.push(f.value);
                                            }
                                          });
                                        }
                                      }
                                    });
                                  }
                                }
                              });
                            }
                          }
                        });
                      }
                    }
                  });
                }
              }
            });
          }
        }
      });
    },
    getUserInfo,
    deepArr(arr) {
      return arr.map((item) => ({
        label: item.name,
        value: item.id,
        children: item.children.length ? this.deepArr(item.children) : null,
      }));
    },
    checkAmount(rule, value, callback) {
      const type = this.form.separateType;
      const index = rule.field.split(".")[1];
      if (type === 1) {
        if (!/^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)$/.test(+value)) {
          callback(new Error("请输入大于0小于100的数值，最多2位小数"));
        } else if (
          (+value > 0 && +value < 100) ||
          this.form.accountRulesInfoList[index].remainAmountBelong === "Y"
        ) {
          callback();
        } else {
          callback(new Error("请输入大于0小于100的数值，最多2位小数"));
        }
      } else {
        if (!/^([0-9]{1,6}$)|(^[0-9]{1,6}\.[0-9]{1,2}$)$/.test(+value)) {
          callback(new Error("请输入大于0且小于1000000的数值，最多2位小数"));
        } else if (
          (+value > 0 && +value < 1000000) ||
          this.form.accountRulesInfoList[index].remainAmountBelong === "Y"
        ) {
          callback();
        } else {
          callback(new Error("请输入大于0且小于1000000的数值，最多2位小数"));
        }
      }
    },
    addChild() {
      if (this.form.accountRulesInfoList.length < 7) {
        this.form.accountRulesInfoList.push({
          memberId: [],
          // feeFlag: "",
          fmtAmount: "",
          remainAmountBelong: "N",
        });
      } else {
        this.$message.warning("最多添加7个分润方！");
      }
    },
    deleteChild(i) {
      this.form.accountRulesInfoList.splice(i, 1);
    },
    // 手续费改变事件
    changeFlag(val, i, prop) {
      if (val === "Y") {
        const arr = JSON.parse(JSON.stringify(this.form.accountRulesInfoList));
        this.form.accountRulesInfoList = arr.map((v, i_) => {
          let flag = "N";
          let fmtAmount = v.fmtAmount;
          if (i === i_) {
            flag = "Y";
            if (prop === "remainAmountBelong") fmtAmount = "";
          }
          return {
            ...v,
            fmtAmount: fmtAmount,
            [prop]: flag,
          };
        });
      }
    },
    testCancel() {
      this.$store.commit("changeLive", false);
      setTimeout(() => {
        this.$store.commit("changeLive", true);
      }, 0);
      this.$backTo("/caseAccount/rules");
    },
    cancel() {
      this.testCancel();
    },
    submit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form.accountRulesInfoList);
          console.log(this.form);
          // const arr = this.form.accountRulesInfoList;
          // 必须选择一个商户承担手续费！
          // const hasFlag = arr.some((v) => v.feeFlag === "Y");
          // if (!hasFlag) {
          //   return this.$message.error("必须选择一个商户承担手续费！");
          // }

          // // 必须选择一个剩余资金归属商户！
          // const hasSurplus = arr.some(v => v.remainAmountBelong === 'Y')
          //   if (!hasSurplus) {
          //     return this.$message.error('必须选择一个剩余资金归属商户！')
          //   }

          // 百分比的时候加起来必须为100
          // if (this.form.separateType === 1) {
          //   const info = this.form.accountRulesInfoList.map(
          //     (v) => +v.fmtAmount
          //   );
          //   const str = info.reduce((pre, next) => pre + next);
          //   if (str >= 100) {
          //     return this.$message.error("百分比之和必须小于100");
          //   }
          // }

          if (this.$route.query.id) {
            this.$http
              .post("/api/settle/rules/update", {
                ...this.form,
                accountRulesInfoList: this.form.accountRulesInfoList.map(
                  (item, i) => ({
                    ...item,
                    memberId: i == 0 ? item.memberId.at(-1) : item.memberId,
                    // memberId: item.memberId.at(-1),
                    remainAmountBelong: item.remainAmountBelong === "Y",
                    // amount: +item.amount,
                    infoSort: i + 1,
                  })
                ),
              })
              .then((res) => {
                if (res.code === "0000") {
                  this.$message.success("修改成功！");
                  this.testCancel();
                }
              });
          } else {
            this.$http
              .post("/api/settle/rules/save", {
                ...this.form,
                // accountRulesInfoList: this.form.accountRulesInfoList.map(
                //   (item, i) => ({
                //     ...item,
                //     memberId: i == 0 ? item.memberId.at(-1) : item.memberId,
                //     remainAmountBelong: i == 0 ? true : false,
                //     // amount: +item.amount,
                //     infoSort: i + 1,
                //   })
                // ),
              })
              .then((res) => {
                if (res.code === "0000") {
                  this.$message.success("创建成功！");
                  this.testCancel();
                }
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.modellabel {
  width: 110px;
  background: #f0f0f0;
  border-radius: 2px;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #bfbfbf;
  padding-left: 10px;
}

.header-tip {
  display: flex;
  justify-content: space-between;
  // padding-top: 13px;
  padding-bottom: 16px;
  .l {
    display: flex;
    margin-top: 13px;
    .title {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      line-height: 33px;
      margin-right: 20px;
    }
    .alert {
      width: 819px;
      // height: 42px;
      background: #fff9f9;
      border-radius: 6px;
      border: 1px solid #f7d8d8;

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fc8f90;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      i {
        font-size: 18px;
      }
      span {
        display: inline-block;
        margin-left: 20px;
      }
    }
    // :deep(.el-alert){
    //   width: 819px;
    // }
  }
  .r {
    margin-bottom: -13px;
  }
}
.rule-form {
  // background: #fff;
  // padding: 34px 0 37px 34px;
  // min-width: 1200px;
  .title {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4f595f;
    line-height: 25px;
    margin-bottom: 15px;
    margin-left: 20px;
  }
  .text {
    color: #666;
  }
  .btn {
    width: 355px;
    height: 70px;
    background: linear-gradient(151deg, #03bfc6 0%, #32e3c9 100%);
    box-shadow: 0px 12px 20px 0px rgba(147, 233, 234, 0.39);
    border-radius: 10px;
    color: #fff;
    margin-left: 130px;
    font-size: 16px;
  }
  :deep(.group) {
    .el-radio {
      display: block;
      margin: 24px 0;
      font-weight: 400;
      color: #1d1c1c;
      font-family: PingFangSC-Regular, PingFang SC;
    }
  }

  .el-icon-remove-outline {
    color: #869daa;
    font-size: 18px;
    cursor: pointer;
  }
}
:deep(.el-input-group__append) {
  background: #25b5d9;
  color: #ffffff;
  border-color: #25b5d9;
}
// .modelrow{
//   :deep(.el-col-2) {
//     padding-left: 0px !important;
//   }
// }
.modelInput {
  :deep(.el-form-item__content) {
    margin-left: 0px !important;
  }
}
.modelBack {
  :deep(.el-radio) {
    line-height: 24px !important;
  }
}
</style>
